<script lang="ts" setup>
import { ref } from 'vue'
const IS_ELECTRON = process.env.IS_ELECTRON

const percentage = ref(0)

if (IS_ELECTRON) {
  const { ipcRenderer } = require('electron')
  const setPercentage = (e: any, val: number) => (percentage.value = val)
  ipcRenderer.on('download-progress', setPercentage)
}
</script>

<template>
  <n-progress
    type="line"
    :border-radius="0"
    :height="30"
    :percentage="~~percentage"
    indicator-text-color="#333"
    status="success"
    indicator-placement="inside"
    processing
    class="fixed top-1/2 transform -translate-y-1-2"
  />
</template>

<style scoped>
.n-modal-mask {
  @apply !bg-transparent;
}
</style>
